<template>
  <div class="datalist">
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="costReq.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          costReq.pageIndex = 1
          getCaseCosts()
        "
      >
        搜索
      </el-button>
      <el-button
        type="warning"
        style="margin-left: 20px"
        size="small"
        @click="calculateCaseCosts()"
      >
        统计案件成本
      </el-button>
      <el-button
        type="text"
        style="margin-left: 20px"
        size="small"
        @click="addCostVis = true"
      >
        添加费用项目
      </el-button>
    </div>
    <div class="content">
      <div style="flex: auto">
        <el-table
          height="90%"
          style="overflow: auto"
          :data="costRes.Items"
          stripe
          border
          highlight-current-row
          show-summary
        >
          <el-table-column type="index" width="60"></el-table-column>
          <el-table-column label="费用项目" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSC_Name ? scope.row.CSC_Name : '未知类型' }}
            </template>
          </el-table-column>
          <el-table-column label="金额" prop="CSC_Fee" width="120">
            <template slot-scope="scope">{{ scope.row.CSC_Fee }}元</template>
          </el-table-column>
          <el-table-column label="统计时间" width="160">
            <template slot-scope="scope">
              {{ scope.row.CSC_CreateTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.CSC_Remark }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-edit"
                @click="
                  curCost = scope.row
                  editCostVis = true
                "
              >
                修改
              </el-button>
              <el-button
                type="text"
                size="small"
                icon="el-icon-delete"
                @click="deleteCost(scope.row.CSC_ID)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          layout="total,prev,pager,next,sizes"
          style="float: right"
          background
          :current-page.sync="costReq.pageIndex"
          :total="costRes.Total"
          :page-size="costReq.pageSize"
          :page-sizes="[10, 15, 20]"
          @size-change="
            (val) => {
              costReq.pageSize = val
              getCaseCosts()
            }
          "
          @current-change="getCaseCosts()"
        ></el-pagination>
      </div>
    </div>

    <el-drawer title="新增" :visible.sync="addCostVis" direction="rtl">
      <el-form label-width="100px" style="margin-top: 20px; width: 80%">
        <el-form-item label="费用项目">
          <el-input v-model="newCost.CSC_Name"></el-input>
        </el-form-item>
        <el-form-item label="费用金额">
          <el-input-number
            v-model="newCost.CSC_Fee"
            precision="2"
            placeholder="请输入金额"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="newCost.CSC_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addCost()">新增</el-button>
          <el-button type="text" @click="addCostVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="编辑" :visible.sync="editCostVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="curCost"
      >
        <el-form-item label="费用项目">
          <el-input v-model="curCost.CSC_Name"></el-input>
        </el-form-item>
        <el-form-item label="费用金额">
          <el-input-number
            v-model="curCost.CSC_Fee"
            precision="2"
            placeholder="请输入金额"
            :min="0"
            :max="max"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="curCost.CSC_Remark"
            rows="3"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" @click="editCost()">保存</el-button>
          <el-button type="text" @click="addCostVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getCaseCosts,
  addCost,
  editCost,
  deleteCost,
  calculateCaseCosts,
} from '@/api/core/caseCost'
export default {
  props: ['caseId'],
  data: function () {
    return {
      costReq: {
        pageIndex: 1,
        pageSize: 12,
        keyword: '',
      },
      costRes: {
        Items: [],
        Total: 0,
      },
      newCost: {},
      curCost: null,
      addCostVis: false,
      editCostVis: false,
    }
  },
  methods: {
    getCaseCosts() {
      this.costReq.caseId = this.caseId
      getCaseCosts(this.costReq).then(({ data }) => {
        this.costRes = data
      })
    },
    addCost() {
      this.newCost.CSC_CaseID = this.caseId
      addCost(this.newCost).then(() => {
        this.getCaseCosts()
        this.addCostVis = false
      })
    },
    editCost() {
      editCost(this.curCost).then(() => {
        this.getCaseCosts()
        this.editCostVis = false
      })
    },
    deleteCost(id) {
      this.$confirm(`是否删除该费用项目`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deleteCost(id).then(() => {
          this.getCaseCosts()
        })
      })
    },
    calculateCaseCosts() {
      if (this.costRes.Items.length > 0) {
        this.$confirm(
          `是否重新统计案件成本？（注意：已有案件成本数据将会删除后重新统计）`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        ).then(() => {
          calculateCaseCosts(this.caseId).then(() => {
            this.getCaseCosts()
          })
        })
      } else {
        calculateCaseCosts(this.caseId).then(() => {
          this.getCaseCosts()
        })
      }
    },
  },
  created: function () {
    if (!this.caseId) {
      return
    }
    this.getCaseCosts()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: 100%;
}
.row {
  height: 100%;
}
.col {
  height: 100%;
}
.col .col_header {
  background: #d9e5fe;
  padding-left: 10px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.col .col_content {
  height: calc(100% - 80px);
  background: white;
  display: flex;
  flex-direction: column;
}
.col .col_content .tree {
  height: 100%;
  width: 100%;
  background: white;
  overflow: auto;
}
</style>
